<!--
  -- 描述：字典管理模块
  --
  -- 作者：cyq
  -- 时间：2018/9/1 12:38
-->
<template>
  <div class="custom-flex-cont-vertical">
    <!--搜索条件-->
    <el-form :inline="true" size="mini" class="custom-form" label-width="auto">
      <el-form-item label="字典代码">
        <el-input v-model="params.code" placeholder="输入字典代码"></el-input>
      </el-form-item>
      <el-form-item label="字典名称">
        <el-input v-model="params.name" placeholder="输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <available v-model="params.state"></available>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEditRole()" v-if="hasPerm('dict-add')"><i
        class="fa fa-plus-circle"></i>&nbsp;新增字典
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, true)"
                 v-if="hasPerm('dict-enable')"><i class="fa fa-unlock"></i>&nbsp;启用字典
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, false)"
                 v-if="hasPerm('dict-enable')"><i class="fa fa-lock"></i>&nbsp;禁用字典
      </el-button>
      <el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length==0" @click="deletePerms()"
                 v-if="hasPerm('dict-del')"><i class="fa fa-trash"></i>&nbsp;删除字典
      </el-button>
    </el-row>
    <!--查询结果列表-->
    <div class="custom-flex-cont fit-all">
      <div class="custom-flex-cont-vertical custom-shadow left-contain" style="margin-right: 10px;width: 250px;"
           v-loading="treeLoading">
        <el-tree ref="leftTree" :data="leftData" node-key="id" :props="{label: 'text', children: 'children'}"
                 highlight-current default-expand-all :expand-on-click-node="false"
                 @node-click="handLeftTreeClick" style="height:700px;overflow-y: scroll;">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <el-badge v-if="data.available>=0" is-dot class="state-dot" :type="data.available===1?'success':'danger'"/>
          </div>
        </el-tree>
      </div>
      <div class="custom-flex-cont-vertical fit-all custom-shadow" style="flex: 1;">
        <el-table
          v-loading="loading"
          :data="tableData"
          @selection-change="multiSelectedChange">
          <template slot="empty">
            <empty-tip></empty-tip>
          </template>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            width="40">
          </el-table-column>
          <el-table-column
            prop="code"
            label="字典代码">
          </el-table-column>
          <el-table-column
            prop="name"
            label="字典名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="parentname"
            label="上级字典"
            width="120">
            <template slot-scope="scope">
              <span>{{scope.row.parent?scope.row.parent.name:'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="80">
            <template slot-scope="scope">
              <el-tag type="success" size="medium" v-if="scope.row.state===1">启用</el-tag>
              <el-tag type="danger" size="medium" v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="remark"
            label="备注">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('dict-edit')">
                <el-button type="text" @click="openAddEditRole(scope.row)">
                  <i class="fa fa-edit"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="禁用" v-if="hasPerm('dict-enable')&&scope.row.state===1">
                <el-button type="text" @click="enablePerms(scope.row.id, false,scope.row.type)">
                  <i class="fa fa-ban text-danger"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="启用" v-if="hasPerm('dict-enable')&&scope.row.state===0">
                <el-button type="text" @click="enablePerms(scope.row.id, true,scope.row.type)">
                  <i class="fa fa-check-circle text-success"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" v-if="hasPerm('dict-del')">
                <el-button type="text" @click="deletePerms(scope.row.id,scope.row.type)">
                  <i class="fa fa-trash text-danger"></i>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="custom-pagination"
          @current-change="query"
          :current-page.sync="params.pageNumber"
          :page-size="params.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableDataTotal"
          style="text-align:right;">
        </el-pagination>
      </div>
    </div>
    <!--新增修改字典-->
    <add-edit-role v-if="showRoleForm" :show.sync="showRoleForm" :roleData="editData"></add-edit-role>
  </div>
</template>

<script>
  import Dic from '../../common/DictionaryTreeDropdown'
  import Available from '../../common/AvailableSelect'
  import AddEditRole from './AddEditRoleDialog'

  export default {
    name: "index",
    components: {
      Dic,
      Available,
      AddEditRole
    },
    data() {
      return {
        loading: false,
        //
        showRoleForm: false,
        editData: null,
        //
        params: {
          code: '',
          name: '',
          type: '',
          parentname: '',
          state: '',
          pageNumber: 1,
          pageSize: 10
        },
        //
        selectedRows: [],
        //
        tableData: [],
        tableDataTotal: 0,
        //
        treeLoading: false,
        leftData: null,
        checkedDict: null
      }
    },
    mounted: function () {
      this.query()
    },
    methods: {
      query: function (currPage) {
        if (!currPage)
          this.params.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/system/dict/list', this.params)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
        this.queryTree();
      },
      queryTree() {
        this.treeLoading = true;
        this.api.post('/bucket-system/system/dict/all', {})
          .then((data) => {
            let _d = {id: '', text: '全部', children: data.data};
            this.leftData = [_d];

            this.$nextTick(() => {
              if (this.checkedDict)
                this.$refs.leftTree.setCurrentKey(this.checkedDict);
            });

            this.treeLoading = false;
          });
      },
      handLeftTreeClick(e) {
        this.params.type = e.id;
        this.checkedDict = e.id;
        this.query();
      },
      openAddEditRole: function (data) {
        if (data)
          this.editData = data;
        else
          this.editData = null;
        this.showRoleForm = true;
      },
      multiSelectedChange: function (val) {
        this.selectedRows = val;
      },
      enablePerms: function (id, enable, type) {
        let _ids = [];
        let _types = [];
        let _url = '/bucket-system/system/dict/disable';
        if (!id && this.selectedRows.length > 0) {
          this.selectedRows.forEach(function (_s, index, arr) {
            _ids.push(_s.id);
            _types.push(_s.type)
          });
        } else {
          _ids.push(id);
          _types.push(type);
        }
        if (enable)
          _url = '/bucket-system/system/dict/enable';
        this.api.post(_url, {id: _ids.join(','), type: _types.join(',')})
          .then((data) => {
            if (data.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            } else {
              this.$message.error(data.data);
            }
          });
      },
      deletePerms: function (id, type) {
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            let _types = [];
            if (!id && this.selectedRows.length > 0) {
              this.selectedRows.forEach(function (_s, index, arr) {
                _ids.push(_s.id);
                _types.push(_s.type)
              });
            } else {
              _ids.push(id);
              _types.push(type)
            }
            this.api.post('/bucket-system/system/dict/delete', {id: _ids.join(','), type: _types.join(',')})
              .then((data) => {
                if (data.code === 200) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                } else {
                  this.$message.error(data.data);
                }
              });
            done();
          });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .left-contain {
    padding: 10px;

  .custom-tree-node {
    position: relative;
    width: 100%;

  span {
    margin-right: 20px;
  }

  }
  }
  .state-dot {
    position: absolute;
    top: 4px;
    right: 10px;
    float: right;
  }
</style>
